// useModal.js
import { ref, watch, onMounted, onUnmounted } from 'vue'

export function useModal() {
  // 模态框的可见性
  const visible = ref(false)

  // 显示模态框
  // const showModal = () => {
  //   visible.value = true
  // }

  // // 隐藏模态框
  // const hideModal = () => {
  //   visible.value = false
  // }

  const toggleModal = () => {
    visible.value = !visible.value
  }

  // 监听可见性变化，执行一些逻辑（如果需要）
  watch(visible, (newVal) => {
    if (newVal) {
      // 模态框打开时的逻辑
    } else {
      // 模态框关闭时的逻辑
    }
  })

  // 组件挂载时，如果需要可以添加逻辑
  onMounted(() => {
    // ...
  })

  // 组件卸载时，如果需要可以清理逻辑
  onUnmounted(() => {
    // ...
  })

  // 暴露给外部使用的方法
  return {
    visible,
    // showModal,
    // hideModal,
    toggleModal
  }
}
